// 函数组件没有钩子函数
import { groupEnd } from 'console'
import { Component,ReactNode } from 'react'
import Child2 from './Child'

// 声明类型
type Istate = {
    name:string
}
class Parent2 extends Component<any,Istate>{
    state = {
        name:'贵富陆'
    }
    // 老的钩子函数
    // componentWillMount():void{
    //     // 组件即将挂在，组件初始化的时候执行，后续的更新不会触发
    //     // 初始化的时候只执行一次
    //     console.group('父组件的componentWillMount')
    //     console.log('父组件的componentWillMount');
    //     console.log(this.state.name);
    //     this.setState({
    //         name:'唐仁'
    //     })
    //     setTimeout(()=>{
    //         console.log(this.state.name);
    //     })
    //     console.groupEnd()
    // }

    handleClick = (arg:any)=>{
        console.log(arg);
        this.setState({
            name:'王者归来'
        })
    }
    render(): ReactNode {
        // 这里会进行deff算法和更新虚拟dom
        // 首先初始化会执行一次，更新的时候会再次执行
        console.group('父组件的render')
        console.log('父组件的render');
        // 绝对不允许在render中直接变更状态，不然会死循环
        // this.setState({
        //     name:'王者归来'
        // })
        console.groupEnd()
        return(
            <fieldset>
                <legend>父组件</legend>
                <h1>状态:{this.state.name}</h1>
                <button onClick={() => {
                    this.handleClick(999)
                }}>点击</button>
                <Child2 name={this.state.name}/>
            </fieldset>
        )
    }

    // 新的钩子函数
    static getDerivedStateFromProps(nextProps:Readonly<any>,nextState: Readonly<Istate>):Object | null {
        // 返回的这个对象，会作为组件的新的状态
        // 如果没有可以返回null
        return {
            name:'坤泰'
        }
    }
    componentDidMount(): void {
        // 组件挂载，虚拟dom的结构已经加载到了root这个元素里面，变成了真实dom
        // 组件初始化的时候，只执行一次
        console.group('父组件的componentDidMount')
        console.log('父组件的componentDidMount');
        console.groupEnd()
    }

    // 性能优化钩子
    // react新能优化非常重要的一环，组件接受新的state或者props时调用
    // 返回一个布尔值，如果是true表示要更新，如果是false那就不更新
    // 是一个非常主观的钩子函数
    shouldComponentUpdate(nextProps: Readonly<any>, nextState: Readonly<Istate>, nextContext: any): boolean {
        // 对比的是新旧讲个状态，不一致的时候那么就要更新
        if(nextState.name === this.state.name){
            return false
        }
        return true;
    }

    // 老的钩子函数
    // 组件即将更新
    // componentWillUpdate(nextProps: Readonly<any>, nextState: Readonly<Istate>): void {
    //     console.group('父组件的componentWillUpdate')
    //     // nextProps,下一个状态
    //     console.log('nextState',nextState);
    //     console.groupEnd()
    // }

    // 组件更新完成
    componentDidUpdate(prevProps: Readonly<any>, prevState: Readonly<Istate>, snapshot?: any): void {
        console.group('父组件的componentDidUpdate')
        // prevProps，上一个状态
        console.log('prevState',prevState);
        console.groupEnd()
    }
}

export default Parent2